import React, { useState, useEffect } from 'react';
import { Table, Input, Button, Space, Card, Modal, Form, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import { connect } from 'dva';
import { PageContainer } from '@ant-design/pro-layout';
function content(props) {
  const [form] = Form.useForm();
  const [Visible, setVisible] = useState(false);
  const [type, setType] = useState(0);
  const [editData, setEditData] = useState({});
  useEffect(() => {
    //获取全部修车记录
    props.dispatch({
      type: 'repair/getList',
    });
  }, []);

  const itemStyle = {
    margin: ' 0 0.5rem 0.6rem',
  };
  const formLayout = {
    labelCol: { xs: 4, sn: 4 },
    wrapperCol: { xs: 24, sm: 20 },
  };
  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button
            onClick={() => handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button>
        </Space>
      </div>
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase())
        : '',
  });

  const handleSearch = (selectedKeys, confirm) => {
    confirm();
    console.log(selectedKeys);
  };

  const handleReset = (clearFilters) => {
    clearFilters();
  };
  const showCreateModal = () => {
    form.setFieldsValue({
      vehicleId: '',
      describe: '',
      maintenanceBeginTime: '',
      maintenanceEndTime: '',
      maintenanceCosts: '',
      creatTime: '',
    });
    setType(1);
    setVisible(true);
  };
  const showEditModal = (value) => {
    form.setFieldsValue({
      vehicleId: value.vehicleId,
      describe: value.describe,
      maintenanceBeginTime: value.maintenanceBeginTime,
      maintenanceEndTime: value.maintenanceEndTime,
      maintenanceCosts: value.maintenanceCosts,
      creatTime: value.creatTime,
    });
    setType(2);
    setVisible(true);
  };
  const hiddenModal = () => {
    setVisible(false);
  };
  const onCreate = (values) => {
    form
      .validateFields()
      .then((values) => {
        console.log(values);
        if (type == 1) {
          //增加维修记录
          // values.maintenanceBeginTime = Date.parse(values.maintenanceBeginTime);
          console.log(values.maintenanceBeginTime);
          props.dispatch({
            type: 'repair/addRepair',
            dataForm: values,
          });
          setVisible(false);
        }
        if (type == 2) {
          //编辑维修记录
          console.log('编辑');
          props.dispatch({
            type: 'repair/updateRepair',
            dataForm: values,
          });
        }
      })
      .catch((info) => {
        message.error('请提交正确信息');
      });
  };

  const columns = [
    {
      title: '车辆编号',
      dataIndex: 'vehicleId',
      key: 'vehicleId',
      width: '10%',
      ...getColumnSearchProps('vehicleId'),
    },
    {
      title: '主要改动描述',
      dataIndex: 'describe',
      key: 'describe',
      width: '10%',
    },
    {
      title: '维修开始时间',
      dataIndex: 'maintenanceBeginTime',
      key: 'maintenanceBeginTime',
      ...getColumnSearchProps('maintenanceBeginTime'),
      render: (text) => <span>{text.slice(0, 10)}</span>,
      width: '15%',
    },
    {
      title: '维修结束时间',
      dataIndex: 'maintenanceEndTime',
      key: 'maintenanceEndTime',
      ...getColumnSearchProps('maintenanceEndTime'),
      render: (text) => <span>{text.slice(0, 10)}</span>,
      width: '15%',
    },
    {
      title: '维修费用',
      dataIndex: 'maintenanceCosts',
      key: 'maintenanceCosts',
    },
    {
      title: '创建时间',
      dataIndex: 'creatTime',
      key: 'creatTime',
    },
    {
      title: '操作',
      render: (tool) => {
        return (
          <div>
            <Link to={'/repair/detail/' + tool.maintenanceId}>
              <Button>详情</Button>
            </Link>
            <Button onClick={() => showEditModal(tool)}>编辑</Button>
            <Button>删除</Button>
          </div>
        );
      },
      width: '20%',
    },
  ];
  const title = <PageContainer header="车辆维修记录"></PageContainer>;
  const extra = (
    <Button type="primary" onClick={showCreateModal}>
      增加维修记录
    </Button>
  );
  // const disPlayList = props.repair.repairList;
  return (
    <div>
      <Card title={title} extra={extra}>
        <Table columns={columns} dataSource={props.repairList} />
      </Card>
      <Modal
        title={type == 2 ? '新建维修' : '编辑维修'}
        visible={Visible}
        onCancel={hiddenModal}
        onOk={onCreate}
      >
        <Form form={form}>
          <Form.Item
            {...itemStyle}
            name="vehicleId"
            label="汽车编号"
            rules={[{ required: true, message: '请输入汽车编号' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            {...itemStyle}
            name="describe"
            label="主要改动描述"
            rules={[{ required: true, message: '请输入主要改动描述' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            {...itemStyle}
            name="maintenanceBeginTime"
            label="开始维修时间"
            rules={[{ required: true, message: '请输入开始维修时间' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="maintenanceEndTime"
            label="结束维修时间"
            rules={[{ required: true, message: '请输入结束维修时间' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            {...itemStyle}
            name="maintenanceCosts"
            label="维修费用"
            rules={[{ required: true, message: '请输入维修费用' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
function mapStateToProps({ repair }) {
  return repair;
}
export default connect(mapStateToProps)(content);
